<template>
  <div ref="container">
    <breadcrumb :breadList="breadList" :name="name">
    </breadcrumb>
    <a-form :form="form">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-card title="最新文章" :bordered="false">
            <a href="#" slot="extra" @click="addMore">more>></a>
            <a-row :gutter="16" style="display:flex;margin-bottom:40px;">
              <a-col :lg="2" :md="12" :sm="24" class="img-box">
                <img src="~@/assets/images/message.png" alt="" class="img">
              </a-col>
              <a-col :lg="22" :md="12" :sm="24" style="margin-left:10px;">
                <h4>实时更新：新型冠状病毒肺炎全国地图</h4>
                <p>注：各省份数据持续更新</p>
                <div class="bottom-p">
                  <span>来自主题：</span>
                  <a href="#">腾讯热点</a> |
                  <span>成都商报</span>
                  <p style="margin-left:80px;display:inline;">
                    <a-icon type="clock-circle" style="font-size:12px;"/>
                    <span>10分钟前</span>
                  </p>
                </div>
              </a-col>
            </a-row>
            <a-row :gutter="16" style="display:flex;margin-bottom:40px;">
              <a-col :lg="2" :md="12" :sm="24" class="img-box">
                <img src="~@/assets/images/message.png" alt="" class="img">
              </a-col>
              <a-col :lg="22" :md="12" :sm="24" style="margin-left:10px;">
                <h4>实时更新：新型冠状病毒肺炎全国地图</h4>
                <p>注：各省份数据持续更新</p>
                <div class="bottom-p">
                  <span>来自主题：</span>
                  <a href="#">腾讯热点</a> |
                  <span>成都商报</span>
                  <p style="margin-left:80px;display:inline;">
                    <a-icon type="clock-circle" style="font-size:12px;"/>
                    <span>10分钟前</span>
                  </p>
                </div>
              </a-col>
            </a-row>
            <a-row :gutter="16" style="display:flex;margin-bottom:40px;">
              <a-col :lg="2" :md="12" :sm="24" class="img-box">
                <img src="~@/assets/images/message.png" alt="" class="img">
              </a-col>
              <a-col :lg="22" :md="12" :sm="24" style="margin-left:10px;">
                <h4>实时更新：新型冠状病毒肺炎全国地图</h4>
                <p>注：各省份数据持续更新</p>
                <div class="bottom-p">
                  <span>来自主题：</span>
                  <a href="#">腾讯热点</a> |
                  <span>成都商报</span>
                  <p style="margin-left:80px;display:inline;">
                    <a-icon type="clock-circle" style="font-size:12px;"/>
                    <span>10分钟前</span>
                  </p>
                </div>
              </a-col>
            </a-row>
            <a-row :gutter="16" style="display:flex;margin-bottom:40px;">
              <a-col :lg="2" :md="12" :sm="24" class="img-box">
                <img src="~@/assets/images/message.png" alt="" class="img">
              </a-col>
              <a-col :lg="22" :md="12" :sm="24" style="margin-left:10px;">
                <h4>实时更新：新型冠状病毒肺炎全国地图</h4>
                <p>注：各省份数据持续更新</p>
                <div class="bottom-p">
                  <span>来自主题：</span>
                  <a href="#">腾讯热点</a> |
                  <span>成都商报</span>
                  <p style="margin-left:80px;display:inline;">
                    <a-icon type="clock-circle" style="font-size:12px;"/>
                    <span>10分钟前</span>
                  </p>
                </div>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="群发消息" :bordered="false">
            <div style="display:flex;margin-bottom:20px;padding:0 20px;">
              <a-button class="common-btn" @click="addAddressee">添加收信人</a-button>
              <span class="line-p">{{ addAddresseeMes }}</span>
            </div>
            <a-comment style="display:flex;">
              <a-avatar
                slot="avatar"
                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                alt="Han Solo"
              />
              <div slot="content">
                <a-form-item>
                  <a-textarea :rows="4" @change="handleChange" :value="value" style="width:400px;"></a-textarea>
                </a-form-item>
                <a-form-item style="text-align:right;">
                  <a-button
                    htmlType="submit"
                    :loading="submitting"
                    @click="handleSubmit"
                    class="common-btn"
                  >
                    提交评论
                  </a-button>
                </a-form-item>
              </div>
            </a-comment>
          </a-card>
          <a-card title="发送列表" :bordered="false">
            <ul>
              <li>
                <div style="display:flex;">
                  <p class="ellipsis-item">“封城”中的意大利：露天咖啡馆坐满了人 多所监狱发生暴动</p>
                  <span style="margin-left:50px;">2020.2.6</span>
                </div>
              </li>
              <li>
                <div style="display:flex;">
                  <p class="ellipsis-item">民政部回应武汉小区造假事件</p>
                  <span style="margin-left:50px;">2020.2.6</span>
                </div>
              </li>
              <li>
                <div style="display:flex;">
                  <p class="ellipsis-item">这场人民战争统帅心中的三个“第一”</p>
                  <span style="margin-left:50px;">2020.2.6</span>
                </div>
              </li>
              <li>
                <div style="display:flex;">
                  <p class="ellipsis-item">“封城”中的意大利：露天咖啡馆坐满了人 多所监狱发生暴动</p>
                  <span style="margin-left:50px;">2020.2.6</span>
                </div>
              </li>
              <li>
                <div style="display:flex;">
                  <p class="ellipsis-item">这个资源全球都在抢 一条新闻引发中国股市动荡！</p>
                  <span style="margin-left:50px;">2020.2.6</span>
                </div>
              </li>
              <li>
                <div style="display:flex;">
                  <p class="ellipsis-item">黑猫“战疫315”策划——维权线索征集正式启动</p>
                  <span style="margin-left:50px;">2020.2.6</span>
                </div>
              </li>
              <li>
                <div style="display:flex;">
                  <p class="ellipsis-item">韩国6名患者确诊前献过血 已经输血给9人</p>
                  <span style="margin-left:50px;">2020.2.6</span>
                </div>
              </li>
              <li>
                <div style="display:flex;">
                  <p class="ellipsis-item">韩国6名患者确诊前献过血 已经输血给9人</p>
                  <span style="margin-left:50px;">2020.2.6</span>
                </div>
              </li>
            </ul>
          </a-card>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import Breadcrumb from '@/components/tools/Breadcrumb'
import moment from 'moment'
export default {
  name: 'MessageCenter',
  components: {
    Breadcrumb
  },
  data () {
    return {
      name: '',
      breadList: [],
      value: '',
      addAddresseeMes: '',
      form: this.$form.createForm(this),
      submitting: false,
      moment
    }
  },
  created () {
    this.getBreadCrumb()
  },
  methods: {
    // 面包屑处理
    getBreadCrumb () {
      this.breadList = []
      this.name = this.$route.name
      this.$route.matched.forEach(item => {
        console.log('1111', item)
        this.breadList.push(item)
      })
    },
    addMore () {
      this.$warning({
        title: '加载中...'
      })
    },
    handleSubmit () {
      if (!this.value) {
        return
      }
      this.submitting = true
      setTimeout(() => {
        this.submitting = false
        this.value = ''
        this.$success({
          title: '评论提交成功'
        })
      }, 1000)
    },
    addAddressee () {
      this.addAddresseeMes = '123456789@163.com'
      this.$success({
        title: '收信人添加成功'
      })
    },
    handleChange (e) {
      this.value = e.target.value
    }
  }
}
</script>
<style scoped>
ul {
  margin:0;
  padding:0;
}
li {
  list-style: circle;
  margin-bottom:14px;
}
.img-box {
  width: 120px;
  height: 120px;
}
.img {
  display:inline-block;
  width: 120px;
  height: 120px;
}
.bottom-p {
  font-size: 8px;
  margin-top: 50px;
}
.line-p {
  width:300px;
  height:32px;
  margin-left: 3px;
  border-bottom: solid 1px #999;
}
.ellipsis-item {
  margin:0;
  width:300px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
